<template>
	<view class="head">
		<view class="head_top">
			<view class="head_top_price">
				3980
			</view>
			<view class="head_top_number">
				915人报名
			</view>
		</view>
	
		<rui-lines-ranking name="排行榜" text="入选近7天「当季销售排行」TOP5" @change="$rui.route('/pages/trip/ranking/ranking')"></rui-lines-ranking>
		<view class="head_title">
			<text class="head_title_tag">爆品</text>
			北疆纯玩10日游（2+1头等舱大巴 6大5A景区）穿越独库 天山天池 喀纳斯
			禾木 魔鬼城 赛里木湖 那拉提 巴音布鲁克
		</view>
		<view class="head_desc">
			适合第一次来疆的游客，用10天假期跟团玩遍北疆精华景点的经典环线，景点不走马观花、一次玩转北疆
		</view>
	
		<view class="head_tag">
			<view class="head_tag_item">
				早鸟特惠
			</view>
			<view class="head_tag_item">
				满6人减300
			</view>
		</view>
	</view>
</template>

<script>

</script>


<style lang="scss" scoped>
	.head {
		color: #333;

		&_tag {
			display: flex;

			&_item {
				font-size: 20rpx;
				color: #ff5d35;
				padding: 2rpx 8rpx;
				margin-right: 10rpx;
				border-radius: 6rpx;
				background: #ffe4e4;
			}
		}

		&_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			&_number {
				color: #999;
				font-size: 24rpx;
			}

			&_price {
				font-size: 44rpx;
				font-weight: bold;
				color: #f00;
				display: flex;
				align-items: flex-end;

				&::before {
					content: "￥";
					font-size: 24rpx;
					font-weight: normal;
					margin-bottom: 8rpx;
				}

				&::after {
					content: "人/起";
					font-size: 24rpx;
					font-weight: normal;
					color: #999;
					margin-bottom: 8rpx;
				}
			}
		}

		&_desc {
			color: #999;
			font-size: 24rpx;
			margin: 20rpx 0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		&_title {
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
			margin-bottom: 20rpx;

			&_tag {
				background: linear-gradient(to left, #fff500, #ffc800);
				font-size: 22rpx;
				width: 60rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				border-radius: 5rpx;
				padding: 4rpx 10rpx;
				font-weight: normal;
			}

		}
	}
</style>